<template>
  <div class="order">
    <div class="time">
      {{ time }}
    </div>
    <div class="number">
      {{ number }}
    </div>
    <div class="realPayment">
      <el-tag
          size="small"
          type="warning"
          effect="light"
          style="font-size: 16px"
          round
      >
        {{ realPayment }}
      </el-tag>
    </div>
    <div class="detail">
      <el-button
          text
          :type="'primary'"
          :size="'small'"
          @click="getOrderClassifyItems(number)"
      >
        订单详情
        <el-icon class="el-icon--right">
          <icon-view/>
        </el-icon>
      </el-button>
    </div>
    <div class="status">
      <span v-if="status == 0">
        <el-button size="small" type="primary" @click="orderPay(number, realPayment)">
          付款
        </el-button>
        <el-popconfirm
            confirm-button-text="确认"
            cancel-button-text="取消"
            :icon="InfoFilled"
            icon-color="#626aef"
            title="是否确认取消该笔交易？"
            @confirm="cancelOrder(number, status, realPayment)"
            width="300px"
            popper-class="popper1"
        >
          <template #reference>
            <el-button size="small" type="danger">
              取消交易
            </el-button>
          </template>
        </el-popconfirm>
      </span>
      <span v-if="status == 1">
        <el-tag size="small" type="warning" style="font-size: 16px; margin-right: 12px; height: 39px">
          待发货
        </el-tag>
        <el-popconfirm
            confirm-button-text="确认"
            cancel-button-text="取消"
            :icon="InfoFilled"
            icon-color="#626aef"
            title="是否确认取消该笔交易？"
            @confirm="cancelOrder(number, status, realPayment)"
            width="300px"
            popper-class="popper1"
        >
          <template #reference>
            <el-button size="small" type="danger">
              取消交易
            </el-button>
          </template>
        </el-popconfirm>
      </span>
      <span v-if="status == 2">
        <el-tag size="small" type="success" style="font-size: 16px; height:39px">
          已完成
        </el-tag>
      </span>
      <span v-if="status == 3">
        <el-tag size="small" type="info" style="font-size: 16px; height:39px">
          已取消交易
        </el-tag>
      </span>
    </div>
  </div>
  <div class="orderDrawer">
    <el-drawer
        v-model="isDrawerShow"
        direction="rtl"
        title="订单详情查看"
        size="65%"
    >
      <template #default>
        <div v-for="orderItems in orderClassifyData" :key="orderItems.id" class="orderItemsTable">
          <h4>{{ orderItems.supplierNickname }}</h4>
          <el-table
              :data="orderItems.orderItemList"
              style="width: 100%; height: 100%"
              :header-cell-style="{
                'font-size':'16px',
                'font-weight':'normal',
                'text-align':'center'
              }"
              :cell-style="{
                'font-size':'15px',
                'font-weight':'normal',
                'background-color':'lightpink',
                'text-align':'center'
              }"
          >
            <el-table-column prop="goodsImg" label="图片" min-width="200px">
              <template v-slot="scope">
                <el-image
                    style="min-width: 100px; height: 100px"
                    :src="scope.row.goodsImg"
                    fit="contain"
                    :preview-src-list="[scope.row.goodsImg]"
                    preview-teleported="true"
                >
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="goodsName" label="名称" min-width="200px"/>
            <el-table-column prop="goodsCount" label="数量" min-width="200px"/>
            <el-table-column prop="goodsUnitPrice" label="单价" min-width="180px"/>
            <el-table-column prop="orderItemState" label="状态" min-width="180px">
              <template v-slot="scope">
                <span v-if="scope.row.orderItemState == 0">
                  <el-tag size="small" type="warning" style="font-size: 14px; height:23px" effect="dark">
                    未付款
                  </el-tag>
                </span>
                <span v-if="scope.row.orderItemState == 1">
                  <el-tag size="small" type="primary" style="font-size: 14px; height:23px" effect="dark">
                    已付款
                  </el-tag>
                </span>
                <span v-if="scope.row.orderItemState == 2">
                  <el-tag size="small" type="success" style="font-size: 14px; height:23px" effect="dark">
                    已完成
                  </el-tag>
                </span>
                <span v-if="scope.row.orderItemState == 3">
                  <el-tag size="small" type="info" style="font-size: 14px; height:23px" effect="dark">
                    已取消
                  </el-tag>
                </span>
              </template>
            </el-table-column>
          </el-table>
          <el-divider style="background: none !important;">
            <el-icon style="background-color: lightpink">
              <star-filled/>
            </el-icon>
          </el-divider>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup name="Order">
import {ref, reactive} from "vue"
import {defineProps, defineEmits} from "vue";
import {InfoFilled, StarFilled, View as IconView} from '@element-plus/icons-vue'
import {ElDrawer, ElMessage} from "element-plus"
import request from "@/utils/request";

const isDrawerShow = ref(false)

const orderClassifyData = reactive([])

defineProps(['time', 'number', 'realPayment', 'status'])

const emit = defineEmits(['selectAllOrder'])

function cancelOrder(oId, status, realPayment) {
  if (status == 0) {
    request.put(`/t-order/updateOrderByOId/${oId}/3`).then(() => {
      emit('selectAllOrder')
      ElMessage({
        message: '取消交易成功',
        type: 'success',
        plain: true
      })
    })
  } else if (status == 1) {
    request.put(`/t-purchaser/orderRefund/${oId}`, null, {
      params: {
        realPayment: realPayment
      }
    }).then((resp) => {
      if (resp.code == 0) {
        emit('selectAllOrder')
        ElMessage({
          message: '取消交易成功',
          type: 'success',
          plain: true
        })
      }
    })
  }
}

function getOrderClassifyItems(oId) {
  request.get(`/t-orderitem/getClassifyOrderItemsByOId/${oId}`).then((resp) => {
    orderClassifyData.length = 0
    orderClassifyData.push(...resp.data)
    isDrawerShow.value = true
  })
}

function orderPay(oId, realPayment) {
  request.put(`/t-purchaser/orderPay/${oId}`, null, {
    params: {
      realPayment: realPayment
    }
  }).then((resp) => {
    emit('selectAllOrder')
  })
}
</script>

<style scoped>
.orderItemsTable :deep(.el-divider) {
  background-color: lightpink !important;
}

.orderItemsTable :deep(.el-divider__text.is-center) {
  background: none !important;
}
</style>
<style>
.order {
  background-color: pink;
  /*box-shadow: 0 0 10px;*/
  border-radius: 5px;
  padding: 15px;
  margin-top: 6px;
  font-size: 10px;
  display: flex;
  justify-content: center; /*垂直居中*/
  align-items: center; /*水平居中*/
}

.order .el-button {
  font-size: 9.5px;
  font-weight: normal;
}

.order .time {
  flex: 1;
  text-align: center;
}

.order .number {
  flex: 1;
  text-align: center;
  margin-left: 10px;
}

.order .sellerName {
  flex: 1;
  text-align: center;
  margin-left: 10px;
}

.order .realPayment {
  flex: 1;
  text-align: center;
}

.order .detail {
  flex: 1;
  text-align: center;
}

.order .status {
  flex: 1;
  text-align: center;
}

h5 {
  font-size: 11px;
}

.orderDrawer .el-drawer {
  background-color: lightpink;
}

.orderDrawer .el-drawer__title {
  font-size: 11px;
}

.orderDrawer .el-drawer__close {
  font-size: 11px;
}

.orderDrawer .el-drawer__close:hover {
  color: skyblue;
}
</style>